/*
 1. 鼠标移入显示,移出隐藏
 目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
 3. 输入搜索关键字, 列表显示匹配的结果
 4. 点击显示或者隐藏更多的分享图标
 5. 鼠标移入移出切换地址的显示隐藏
 6. 点击切换地址tab

 7. 鼠标移入移出切换显示迷你购物车
 8. 点击切换产品选项 (商品详情等显示出来)

 9. 点击向右/左, 移动当前展示商品的小图片
 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
 */

;$(function () {

    var shareIsOpen = false //分享按钮是否打开的的标识符，默认为false
    var moveCount  = 0  //小图片的移动次数，默认为0

    showHide()
    showSecondaryMenu()
    searchHelper()
    shareMore()
    address()
    minicart()
    detailTabs()
    preview()
    mediumImg()
    magnifier()


    // 1. 鼠标移入显示,移出隐藏
    // 目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
    function showHide() {
        $('[name=show_hide]').hover(function () {
            //获取父元素的id
            var parentId = $(this).attr('id')
            //更具规则拼接得到子元素的id
            var chId = parentId + '_items'
            //移入显式子元素
            $(this).children('#' + chId).show()
        },function () {
            var parentId = $(this).attr('id')
            var chId = parentId + '_items'
            //移出则隐藏子元素
            $(this).children('#' + chId).hide()
        })
    }

    // 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
    function showSecondaryMenu() {
        $('[class=cate_item]').hover(function () {
            //展开二级菜单
            $(this).children('[class=sub_cate_box]').show()
        },function () {
            //隐藏二级菜单
            $(this).children('[class=sub_cate_box]').hide()
        })
    }


    // 3. 输入搜索关键字, 列表显示匹配的结果
    function searchHelper() {
        // 获取焦点并且有内容的时候显示（keyup/focus/blur）
        $('#txtSearch').bind('keyup focus',function () {
            //文本内容不为空才显示(去掉空格键)
            if (this.value.trim()){
                $('#search_helper').show()
            }
        }).blur(function () {
            //失去焦点隐藏
            $('#search_helper').hide()
        })

    }


    // 4. 点击显示或者隐藏更多的分享图标
    function shareMore() {
        var $shareMore = $('#shareMore')
        $shareMore.click(function () {
            if(!shareIsOpen){
                //若是关闭，则打开
                //改变父元素的宽度
                $shareMore.parent('#dd').width(200)
                //改变箭头的指向
                $shareMore.children('b').addClass('backword')
                //显示后面两种分享方式
                $shareMore.siblings('a').filter(':gt(2)').show()
            }else {
                //更改父元素的宽度
                $shareMore.parent('#dd').width(155)
                //改变箭头的指向
                $shareMore.children('b').removeClass('backword')
                //隐藏后面两种隐藏方式
                $shareMore.siblings('a').filter(':gt(2)').hide()
            }
            //更改打开状态的标识符
            shareIsOpen = !shareIsOpen
        })
    }


    // 5. 鼠标移入移出切换地址的显示隐藏
    // 6. 点击切换地址tab
    function address() {
        //地址栏移入移出隐藏地址下拉框
        $('#store_select').hover(function () {
            $(this).children(':gt(0)').show()
        },function () {
            $(this).children(':gt(0)').hide()
        })

        //关闭按钮点击隐藏地址下拉框
        $('#store_close').click(function () {
            $(this).hide().siblings(':gt(0)').hide()
        })

        //点击tab改变样式
        $('#store_select').find('#store_tabs li').click(function () {
            $('#store_tabs li').removeClass('hover')
            $(this).addClass('hover')
        })

    }


    // 7. 鼠标移入移出切换显示迷你购物车
    function minicart() {
        $('#minicart').hover(function () {
            this.className = 'minicart'
            $(this).children('div').show()
        },function () {
            this.className = ''
            $(this).children('div').hide()
        })
    }

    // 8. 点击切换产品选项 (商品详情等显示出来)
    function detailTabs() {
        $('#product_detail').children('ul.main_tabs').children('li').click(function () {
            //消除其他的样式
            $(this).siblings().removeClass('current')
            //增加被点击的样式
            $(this).addClass('current')
            //隐藏其他的模块
            $(this).parent().siblings('div:gt(0)').hide()
            //显示对应的模块
            $(this).parent().siblings('div:gt(0)').eq($(this).index()).show()
        })
    }

    // 9. 点击向右/左, 移动当前展示商品的小图片
    function preview() {
        //获取两个按钮
        var $btns = $('#preview').children('h1').children('a')
        //获取小图的列表
        var $imgList = $('#icon_list').children('li')
        //获取最大的可移动次数
        var maxMove = $imgList.length - 5
        //如果展示的图片小于5张，就不用移动了
        if (maxMove <= 0){
            return
        }
        var img_s_width = $('#icon_list').children('li').first().width()//获取预览图片的宽度
        //向右的移动箭头初始设置为可移动的
        $btns.last().attr('class','forward')
        $btns.last().click(function () {
            if (moveCount === maxMove){
                return
            }
            //这个地方不能用position（）
            var targetLeft = $('#icon_list').offset().left - img_s_width
            // console.log(targetLeft)
            $('#icon_list').offset({
                left: targetLeft
            })

            $btns.first().attr('class','backward')

            moveCount++

            if (moveCount === maxMove){
                $(this).attr('class','forward_disabled')
            }
        })

        $btns.first().click(function () {
            if (moveCount === 0){
                return
            }

            var targetLeft = $('#icon_list').offset().left + img_s_width
            $('#icon_list').offset({
                left: targetLeft
            })

            $btns.last().attr('class','forward')
            moveCount--
            if (moveCount === 0){
                $(this).attr('class','backward_disabled')
            }

        })
    }

    // 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
    function mediumImg() {
        $('#icon_list').children('li').hover(function () {
            //获取小图的路径
            var smallImgPath = $(this).children('img').attr('src')
            //更具小图推测中图的路径
            var imgPath = smallImgPath.replace(/.jpg/,'-m.jpg')
            //中图更改路径
            $('#mediumImg').attr('src',imgPath)
            //小图显示红框
            $(this).children('img').addClass('hoveredThumb')
        },function () {
            //小图取消红框
            $(this).children('img').removeClass('hoveredThumb')
        })
    }

    // 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
    function magnifier() {
        var $medimImgContainer = $('#medimImgContainer')//获取中图
        var $maskTop = $('#maskTop')//中图的覆盖面
        var $mask = $('#mask')//小黄框
        var $loading = $('#loading')//加载的动态图片
        var $largeImg = $('#largeImg')//大图
        var $largeImgContainer = $('#largeImgContainer')//大图的容器
        $medimImgContainer.hover(function () {
            //获取鼠标的坐标
            //显示大图容器
            $largeImgContainer.show()
            //更具正则表达式获取大图
            $largeImg.attr('src',$('#mediumImg').attr('src').replace(/-m.jpg/,'-l.jpg'))
            //大图加载完成之后，执行下列操作
            $largeImg.load(function () {
                //调整容器大小为大图的1/4
                $largeImgContainer.css({
                    width: $largeImg.width() / 2,
                    height: $largeImg.height() / 2
                })
                //隐藏加载的图片
                $loading.hide()
                //显示大图即可
                $largeImg.show()

            })

            $maskTop.mousemove(function (event) {
                //使得鼠标居中显示
                var left = event.offsetX - ( $mask.width() / 2 )
                var top = event.offsetY - ( $mask.height() / 2 )
                //如果黄框超出范围，进行修正
                if (left < 0){
                    left = 0
                }else if (left > $maskTop.width() - $mask.width() ){
                    left =  $maskTop.width() - $mask.width()
                }

                if (top < 0){
                    top = 0
                }else if (top > $maskTop.height() - $mask.height()){
                    top = $maskTop.height() - $mask.height()
                }

                //更改mask的位置
                $mask.css({
                    left: left,
                    top: top
                })
                //展示黄框
                $mask.show()


                    //定位放大镜的位置
                    var largeLeft = - left * ( $largeImg.width() / $maskTop.width()  )
                    var largeTop = - top * ($largeImg.height() / $maskTop.height())
                    console.log(largeLeft)
                    console.log(largeTop)

                    //更改大图位置
                    $largeImg.css({
                        left: largeLeft,
                        top: largeTop
                    })






            })

        },function () {
            //鼠标移出，隐藏小黄看
            $mask.hide()
            //隐藏大图容器
            $largeImgContainer.hide()
        })
    }




})